<template>
    <a-table :columns="columns" :pagination="pagination" :dataSource="sjWljdInfoList" @change="onChange">
        <!--搜索部分-->
        <div
                slot="filterDropdown"
                slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                style="padding: 8px"
        >
            <a-input
                    v-ant-ref="c => searchInput = c"
                    :placeholder="`Search ${column.dataIndex}`"
                    :value="selectedKeys[0]"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @pressEnter="() => handleSearch(selectedKeys, confirm)"
                    style="width: 188px; margin-bottom: 8px; display: block;"
            />
            <a-button
                    type="primary"
                    @click="() => handleSearch(selectedKeys, confirm)"
                    icon="search"
                    size="small"
                    style="width: 90px; margin-right: 8px"
            >Search
            </a-button
            >
            <a-button
                    @click="() => handleReset(clearFilters)"
                    size="small"
                    style="width: 90px"
            >Reset
            </a-button
            >
        </div>
        <a-icon
                slot="filterIcon"
                slot-scope="filtered"
                type="search"
                :style="{ color: filtered ? '#108ee9' : undefined }"
        />
        <template slot="customRender" slot-scope="text">
      <span v-if="searchText">
        <template
                v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
          <mark
                  v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                  :key="i"
                  class="highlight">{{ fragment }}</mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
            <template v-else>{{ text }}</template>
        </template>


        <p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{record.description}}</p>
        <div slot="ddScore" slot-scope="record">
            {{record.ddScore}}
            <div v-if="record.wljd.wljdZt===0">
                未签协议
            </div>
            <div v-if="record.wljd.wljdZt===1">
                未上货
            </div>
            <div v-if="record.wljd.wljdZt===2">
                已上货
            </div>
            <div v-if="record.wljd.wljdZt===3">
                运输中
            </div>
            <div v-if="record.wljd.wljdZt===4">
                已到达
            </div>
            <div v-if="record.wljd.wljdZt===5">
                已卸货
            </div>
            <div v-if="record.wljd.wljdZt===6">
                货主付款
            </div>
            <div v-if="record.wljd.wljdZt===7">
                司机收款
            </div>
        </div>
    </a-table>
</template>
<script>

    export default {
        name: 'SjWljdTable',
        props: ["sjWljdInfoList"],
        data() {
            return {
                searchText: null,
                columns: [
                    {
                        title: '货物类型',
                        dataIndex: 'hwInfo.hw.hwLx',
                        filters: [
                            {
                                text: 'Joe',
                                value: 'Joe'
                            },
                            {
                                text: 'Jim',
                                value: 'Jim'
                            }
                        ],
                        width: 80,
                        onFilter: (value, record) => record.hwInfo.hw.hwLx.indexOf(value) === 0,
                    },
                    {
                        title: '发货货主',
                        dataIndex: 'hzUser.userNc',
                        width: 80,
                        //   搜索
                        scopedSlots: {
                            filterDropdown: 'filterDropdown',
                            filterIcon: 'filterIcon',
                            customRender: 'customRender',
                        },
                        onFilter: (value, record) => record.hzUser.userNc.toString().toLowerCase().includes(value.toLowerCase()),
                        onFilterDropdownVisibleChange: visible => {
                            if (visible) {
                                setTimeout(() => {
                                    this.searchInput.focus();
                                }, 0);
                            }
                        },
                    },
                    {
                        title: '时间',
                        dataIndex: 'wljd.wljdFqjdqqrqsj',
                        width: 100,
                        sorter: (a, b) => a.wljd.wljdFqjdqqrqsj - b.wljd.wljdFqjdqqrqsj,
                    },
                    {
                        title: '订单状态',
                        width: 80,
                        sorter: (a, b) => a.ddScore.length - b.ddScore.length,
                        scopedSlots: {customRender: 'ddScore'}
                    }],
                pagination: {
                    defaultPageSize: 15,
                    style: {
                        marginRight: "15px"
                    }
                }
            }
        },
        created(){
            console.log(this.sjWljdInfoList)
        },
        methods: {
            onChange(pagination, filters, sorter) {
                console.log('params', pagination, filters, sorter)
            },
            handleSearch(selectedKeys, confirm) {
                confirm();
                this.searchText = selectedKeys[0];
            },
            handleReset(clearFilters) {
                clearFilters();
                this.searchText = '';
            },
        }
    }
</script>